/*!
 * @author Isis (igraziatto) Graziatto <isis.g@vanillaforums.com>
 * @copyright 2009-2018 Vanilla Forums Inc.
 * @license GPL-2.0-only
 */

/* -------------------------------------------------------------- *\
    Variables
\* -------------------------------------------------------------- */

$flyout_bg: $global-color_white !default;
$flyout-hover_bg: $global-color_active_primaryBg !default;
$flyout_fg: $global-color_grey !default;
$flyout_borderColor: mix($flyout_fg, $flyout_bg, 24%) !default;
$flyout_border: $global-border-width $global-border-style $flyout_borderColor !default;
$flyoutOverlay-border_color: mix($flyout_fg, $flyout_bg, 10%) !default;
$flyout_borderRadius: $global_borderRadius !default;

$flyout-link_color: $flyout_fg !default;
$flyout-link-hover_color: $link-default-hover_color !default;

$flyoutHeader_fontSize: $global-subTitle_fontSize !default;
$flyoutHeader_minHeight: 44px !default;
$flyoutHeader_spacing: 12px !default;

$flyoutMenuItems_padding: 8px !default;
$flyoutMessage_padding: 4px 18px !default;
$flyoutMessage-unreadDot_width: 12px !default;

$flyoutFooter_spacing: $flyoutHeader_spacing !default;
$flyoutFooter_minHeight: $flyoutHeader_minHeight !default;

$flyout_meta_fg: mix($flyout_fg, $flyout_bg, 85%) !default;

$flyoutModal-large_width: 375px;

$dropDown_width: 350px !default;
$menuItems_width: 250px !default;

$dropDown-item_verticalPadding: 6px !default;
$dropDown-item_horizontalPadding: 18px !default;

$dropDown-item_mobile_minHeight: 44px !default;

$flyout-progress_size: 24px !default;

/* -------------------------------------------------------------- *\
    Styles
\* -------------------------------------------------------------- */

.Dropdown.MenuItems {
    width: 100%;
}

.OptionsMenu .Flyout {
    right: 0;
    top: 110%;
}

.ToggleFlyout.Open,
.editor-dropdown-open,
.richEditor-button.isOpen {
    @include maxWidth {
        min-width: auto;
    }

    .MenuItems,
    .Flyout {
        display: block;
    }
}

.MenuItems,
.Flyout.Flyout {
    @include shadow-dropDown;
    padding: $dropDown-item_verticalPadding 0;
    position: absolute;
    @if $staticVariables {
        background-color: $flyout_bg;
        color: $flyout_fg;
        border: $flyout_border;
        border-radius: $flyout_borderRadius;
    }
    z-index: 1;
    @include maxWidth {
        z-index: 1;
    }

    min-width: $dropDown_width;

    // Flyouts will acclimate to the width of their ButtonGroup.
    .ButtonGroup.Big & {
        min-width: initial;
    }

    .InProgress {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: $flyout-progress_size * 2;
        width: 100%;
        padding-top: $flyout-progress_size;
        padding-bottom: $flyout-progress_size;

        &::after {
            @include spinnerLoader($flyout-progress_size, 4px);
            content: "";
        }
    }

    &::before,
    &::after {
        content: none;
    }

    hr,
    .menu-separator,
    .dd-separator,
    .editor-action-separator {
        height: 1px;
        min-height: 0;
        width: 100%;
        background-color: $flyoutOverlay-border_color;
        margin-top: $dropDown-item_verticalPadding;
        margin-bottom: $dropDown-item_verticalPadding;
        padding: 0 !important;
        display: block;

        &:active,
        &:focus,
        &:hover {
            background: transparent;
        }
    }

    .Item,
    .editor-action {
        padding: $flyoutMessage_padding;
    }

    .editor-action:not(.editor-action-separator) {
        color: inherit !important;

        &:active,
        &:focus,
        &:hover {
            color: inherit !important;
            background-color: $global-color_active_primaryBg !important;
        }
    }

    .Item,
    li,
    .editor-action {
        display: flex;
        flex-wrap: nowrap;
        color: inherit;
        position: relative;
        border-bottom-width: 0;

        a {
            &:active,
            &:focus,
            &:hover {
                color: inherit !important;
                @if $staticVariables {
                    background-color: $global-color_active_primaryBg !important;
                }
                text-decoration: none;
            }
        }

        .Count {
            margin-left: auto;
        }
    }

    .Item.Title,
    .Item.Center {
        a {
            &:active,
            &:focus,
            &:hover {
                background-color: transparent !important;
            }
        }
    }

    strong {
        font-family: $global-heading_fontFamily;
        font-weight: $global-semibold_fontWeight;
        font-size: $global-large_fontSize;
        line-height: $global-condensed_lineHeight;
        margin: 0;
    }

    a {
        color: $flyout-link_color;

        &:focus,
        &:hover {
            color: $flyout-link-hover_color;
        }
    }

    .Meta {
        color: $flyout_meta_fg;
    }
}

.Flyout.Flyout-withFrame {
    padding: 0;
}

.MenuItems {
    padding: $flyoutMenuItems_padding 0;

    li > a,
    a,
    a:link,
    .editor-action {
        padding: $flyoutMessage_padding;
        min-height: $dropDown-item_minHeight;
        line-height: $global-condensed_lineHeight;
        display: flex;
        align-items: center;
        width: 100%;

        @include maxWidth {
            font-size: $global-large_fontSize;
            font-weight: $global-semibold_fontWeight;
            min-height: $dropDown-item_mobile_minHeight;
        }
    }
}

.emoji-wrap.emoji-wrap.emoji-wrap {
    display: inline-flex;
    padding: $flyoutFooter_spacing;
    width: auto;

    &:active,
    &:focus,
    &:hover {
        padding: $flyoutFooter_spacing;
    }
}

.Flyout,
.richEditorFlyout {
    .Item + .Item {
        border-top: $flyout_border;
    }

    .Item.Title,
    .richEditorFlyout-header {
        display: flex;
        position: relative;
        align-items: center;
        flex-wrap: nowrap;
        width: 100%;
        min-height: $flyoutHeader_minHeight;
        padding: 0 $flyoutHeader_spacing !important;
        z-index: 1;

        &:active,
        &:focus,
        &:hover {
            background-color: transparent;
            text-decoration: none;
        }

        strong {
            display: block;
        }

        a {
            position: absolute;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            overflow: hidden;
            height: $formElement-height;
            width: $formElement-height;
            min-width: $formElement-height;
            padding: 0;
            color: transparent;

            &:focus,
            &:hover,
            &:active {
                color: $flyout-link-hover_color;

                &::before {
                    color: $flyout-link-hover_color;
                }
            }

            &::before {
                @include kbicon;
                display: block;
                line-height: $formElement-height;
                font-size: $icon-default_size;
                color: $flyout-link_color;
            }
        }
    }

    .Item.Center:last-child {
        display: flex;
        position: relative;
        flex-wrap: wrap;
        align-items: center;
        padding: $flyoutFooter_spacing;
        min-height: $flyoutFooter_minHeight;
        z-index: 1;

        &:active,
        &:focus,
        &:hover {
            background-color: transparent;
            text-decoration: none;
        }

        a {
            padding: 0 !important;

            &:focus,
            &:hover,
            &:active {
                color: $flyout-link-hover_color !important;
            }
        }

        .button + .button {
            margin-left: $utility-baseUnit * 2 - $formElement-borderWidth;
        }
    }

    .Empty {
        margin: 0;
    }

    .ItemContent {
        margin: 0;
        line-height: inherit;
        flex-grow: 1;
        padding: {
            left: 10px;
            right: 18px;
        }
        max-width: calc(100% - #{$flyoutMessage-unreadDot_width + $theme-photo_size});

        a {
            font-weight: 700;

            &:focus,
            &:hover {
                color: $flyout-link_color;
            }
        }
    }

    .Subject,
    .Excerpt,
    .ItemContent {
        line-height: $global-base_lineHeight;
    }

    .Meta {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        width: calc(100% + (#{$utility-baseUnitHalf * 2}));
        margin: 0 -#{$utility-baseUnitHalf};
    }

    .MItem {
        display: inline-block;
        margin: 0 $utility-baseUnitHalf;
        font-size: $global-small_fontSize;
        color: inherit;
    }

    .HasNew.HasNew {
        color: transparent;
        position: absolute;
        display: block;
        top: 0;
        right: $flyoutMenuItems_padding;
        bottom: 0;
        max-height: 100%;
        max-width: 100%;
        margin: auto 0;
        height: $flyoutMessage-unreadDot_width;
        width: $flyoutMessage-unreadDot_width;
        background-color: $global-color_primary;
        border-radius: 50%;
    }
}

.PopList.PopList {
    font-size: $global-medium_fontSize;

    .Item {
        padding: $flyoutMenuItems_padding;
    }

    .PhotoWrap {
        height: $theme-photo-small_size;
        width: $theme-photo-small_size;
    }
}

.PopList.Activities {
    .Item.Title a::before {
        content: $kbicon-settings;
    }
}

.PopList.Conversations {
    .Item.Title a::before {
        content: $kbicon-compose;
    }
}

.editor-action-emoji {
    .MenuItems {
        width: calc(44px * 6 + 2px);
    }
}

.editor-dd-link + .mobileFlyoutOverlay {
    input.InputBox {
        width: calc(100% - (#{$flyoutMenuItems_padding} * 2));
        margin: $flyoutMenuItems_padding;
    }

    .MenuButtons {
        border-top: solid $flyoutOverlay-border_color 1px;
        padding: $flyoutMenuItems_padding;
        min-height: $dropDown-item_minHeight;
    }
}

.OnlineUserWrap .OnlineUserName.OnlineUserName,
.MenuItems-Reactions {
    @include shadow-dropDown;
    @if $staticVariables {
        color: $flyout_fg !important;
        border: $flyout_border;
        border-radius: $flyout_borderRadius;
        background-color: $flyout_bg;
    }
    z-index: 2;

    @include maxWidth {
        z-index: 2;
    }

    &::before,
    &::after {
        content: none !important;
    }
}

.OnlineUserWrap .OnlineUserName {
    padding: $flyoutMessage_padding !important;

    @include maxWidth {
        display: none;
    }
}

.MenuItems-Reactions.MenuItems-Reactions {
    padding: 0;
    min-width: 0;

    li {
        padding: $flyoutMenuItems_padding;
    }

    a,
    .PhotoWrap {
        padding: 0 !important;
    }

    .PhotoWrap + a {
        align-items: center;
        min-height: 20px;
        line-height: 20px;
        max-width: calc(100% - 20px - (#{$flyoutMenuItems_padding} * 2));

        @if $staticVariables {
            &:hover,
            &:focus,
            &:active {
                background-color: transparent !important;
                color: $flyout-link-hover_color !important;
            }
        }
    }

    .PhotoWrap.PhotoWrap {
        width: 20px;
        height: 20px;
        min-height: 0;
        max-width: 100%;
        margin-right: $flyoutMenuItems_padding;
    }
}

.selectBox-content {
    margin-top: 0;
}

.selectBox-item .dropdown-menu-link.selectBox-link {
    padding-left: 30px !important;
    position: static;
}

.dropdown-menu-link .Alert {
    margin-left: auto;
}

.richEditorFlyout {
    .richEditorFlyout-header {
        border-bottom: solid $flyoutOverlay-border_color 1px;
    }

    .richEditor-button {
        &:active,
        &:focus,
        &:hover {
            background-color: $global-color_active_primaryBg;
        }
    }
}

.MenuItems.ui-autocomplete {
    @if $staticVariables {
        color: $flyout_fg;
    }

    .ui-menu-item,
    .ui-menu-item > a {
        display: block;
    }

    @if $staticVariables {
        a {
            &:hover,
            &:focus,
            &:active {
                color: $flyout_fg;

                .Gloss {
                    color: inherit;
                }
            }
        }
    }

    .Title {
        display: block;
        width: 100%;
        font-weight: $global-semibold_fontWeight;
        font-size: $global-large_fontSize;
        margin-bottom: $utility-baseUnit;
    }

    .Aside {
        float: left;
        font-size: $global-small_fontSize;
        opacity: 1;
    }

    .Gloss {
        width: auto;
        padding-left: $utility-baseUnit;
        font-size: $global-small_fontSize;
    }
}

// ---------- click event for iOS <=9.3 ---------- //
@include maxWidth($theme-breakpoint_tablet) {
    .ToggleFlyout,
    .ButtonGroup,
    .editor-dropdown {
        cursor: pointer;

        .mobileFlyoutOverlay {
            cursor: pointer;
        }
    }
}

// --------------  mobile styles  --------------- //
@include maxWidth {
    .mobileFlyoutOverlay {
        opacity: 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        height: 100vh;
        width: 100vw;
        background: rgba($global-color_black, 0.2);
        z-index: 1;
        pointer-events: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ToggleFlyout.Open,
    .ButtonGroup.Open,
    .editor-dropdown-open,
    .richEditor-button.isOpen {
        .mobileFlyoutOverlay {
            opacity: 1;
            z-index: 1;
            pointer-events: initial;
        }

        .MenuItems.MenuItems,
        .Flyout.Flyout {
            visibility: visible;
            transition-delay: 0s;
            opacity: 1;
            top: initial;
            right: initial;
            left: initial;
            max-width: calc(100% - 24px);
        }
    }

    .MenuItems,
    .Flyout {
        max-width: $flyoutModal-large_width;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        position: fixed;
        display: block;
        visibility: hidden;
        @if $staticVariables {
            box-shadow: 0 -2px 10px 2px rgba($global-color_black, 0.1);
        }
        opacity: 0;
        cursor: pointer;
        max-height: 80vh;
        overflow: auto;
        transition: visibility 0s linear $global-default_timing, transform $global-default_easing $global-default_timing,
            opacity $global-default_easing $global-default_timing;
        z-index: 100;

        @if $staticVariables {
            a {
                color: $flyout-link_color;

                &:focus,
                &:hover {
                    color: $flyout-link-hover_color;
                }
            }
        }
    }
}
